<template>
    <view class="function-options">
        <view
            v-for="item in functionList"
            :key="item.id"
            @click="handleClick(item)"
            class="function-item"
        >
            <view class="item-icon">
                <han-icon :name="item.icon" size="36" />
            </view>
            <view class="item-label">{{ item.label }}</view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { USER_FUNCTION_LIST } from '@/util/config/user.config.js';

const functionList = ref(USER_FUNCTION_LIST);

// 处理点击功能项
const handleClick = (item) => {
    uni.navigateTo({
        url: item.path
    });
};
</script>

<style lang="scss">
.function-options {
    display: flex;
    flex: 1;
    justify-content: space-around;
    padding: 20rpx 0;

    .function-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .item-icon {
        }

        .item-label {
            font-size: $han-font-size-sm;
        }
    }
}
</style>
